<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.事件传参</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			总结：
				1.不传参数，那就写：@click="show" ，show会收到一个event（事件对象）
				2.传一个参数，那就写：@click="show(6)" ，show只会收到一个6
				3.传多个参数，那就写：@click="show(6,7,8)" ，show会收到：6、7、8
				4.传参同时还想用事件对象，那就写：@click="show($event,6)"，show会收到：事件对象、6
				5.注意：传参时，当然也可以传递data中的数据，例如@click="show(address,tel)"
				6.如下这么写，有点不好：
						@click="show($event)"
						@click="show()"
		-->

		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>欢迎来到，{{name}}</h1>
			<button @click="show1">按钮1</button>
			<button @click="show2(666)">按钮2</button>
			<button @click="show3($event,666)">按钮3</button>
			<button @click="show4(address,tel)">按钮4</button>

			<hr>

			<!-- 正常人不会写下面两行的代码 -->
			<!-- <button @click="show1($event)">按钮1</button> -->
			<!-- <button @click="show1()">按钮1</button> -->

		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					name:'尚硅谷',
					address:'宏福科技园',
					tel:'010-34567890'
				},
				methods:{
					show1(e){
						console.log(e)
						alert('你点了按钮1')
					},
					show2(number){
						console.log(number)
						alert('你点了按钮2')
					},
					show3(e,number){
						console.log(number,e)
						alert('你点了按钮3')
					},
					show4(v1,v2){
						console.log(v1,v2)
					}
				}
			})
		</script>
	</body>
</html>